(() => {
  let cpxl_xq_nav = document.querySelector(".cpxl_xq .cpxl_xq_nav");
  let cpxl_xq_itm = document.querySelectorAll(".cpxl_xq_nav .cpxl_xq_itm");
  let cpxl_xq_img = document.querySelector(".cpxl_xq_img");
  let cpxl_xq_item = document.querySelectorAll(".cpxl_xq_item");
  cpxl_xq_nav.addEventListener("click", function (e) {
    for (let index = 0; index < cpxl_xq_itm.length; index++) {
      cpxl_xq_itm[index].classList.remove("cpxl_act");
    }
    if (e.target.className == "cpxl_xq_itm") {
      e.target.classList.add("cpxl_act");
      cpxl_xq_img.innerHTML = ` <li class="col-xl-3 col-lg-6 col-sm-6 col-6 mb-1">
          <img src="./image/稻谷大米.png" alt="" />
          <span class="textsize3">水稻/大米1</span>
        </li>
        <li class="col-xl-3 col-lg-6 col-sm-6 col-6 mb-1">
          <img src="./image/稻谷大米.png" alt="" />
          <span class="textsize3">水稻/大米1</span>
        </li>
        <li class="col-xl-3 col-lg-6 col-sm-6 col-6 mb-1">
          <img src="./image/稻谷大米.png" alt="" />
          <span class="textsize3">水稻/大米1</span>
        </li>
        <li class="col-xl-3 col-lg-6 col-sm-6 col-6 mb-1">
          <img src="./image/稻谷大米.png" alt="" />
          <span class="textsize3">水稻/大米</span>
        </li>`;
    }
  });
  cpxl_xq_item.forEach((item, index) => {
    item.addEventListener("click", (e) => {
      localStorage.setItem("goodsId", index);
      console.log(e.target, index);
      window.location.href = `./goodsDet.html`;
    });
  });
})();
